import { _decorator, Component, Node, Label, Button, Sprite } from 'cc';
import { BaseView } from '../../../../scripts/libs/rxjs/cc3/BaseView';
import { BindButton } from '../../../../scripts/libs/rxjs/cc3/BindButton';
import { gm } from '../../../../scripts/managers/GameManager';
import { MergeASAP } from '../../../../scripts/libs/rxjs/cc3/Merge';
import { Color } from 'cc';
import { Colors } from '../../game/basic';
import { KeyDown } from '../../../../scripts/libs/rxjs/cc3/KeyEvent';
import { KeyCode } from 'cc';
import { lm } from '../../LobbyManager';
import { FlowStatus } from '../../Enums';
const { ccclass, property } = _decorator;

@ccclass('EditorTools2')
export class EditorTools2 extends BaseView {

    @property(Sprite)
    colorSprite: Sprite = null;

    @property(Label)
    colorLabel: Label = null;

    @property(Button)
    exitButton: Button = null;

    @property(Button)
    createBlockButton: Button = null;

    @property(Button)
    createGlassButton: Button = null;

    useObserves() {
        return [
            MergeASAP(gm.editToolsSelected, gm.editColorSelected).subscribe(this.refresh.bind(this)),
            BindButton(this.exitButton).subscribe(_ => lm.flowStatus.value = FlowStatus.Lobby),
            BindButton(this.createBlockButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'block' ? null : 'block'),
            BindButton(this.createGlassButton).subscribe(_ => gm.editToolsSelected.value = gm.editToolsSelected.value == 'glass' ? null : 'glass'),
            KeyDown().subscribe((_: KeyCode) => {
                if (_ == KeyCode.KEY_B) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'block' ? null : 'block';
                } else if (_ == KeyCode.KEY_G) {
                    gm.editToolsSelected.value = gm.editToolsSelected.value == 'glass' ? null : 'glass';
                }
            }),
        ];
    }

    refresh() {
        this.colorSprite.color = Colors[gm.editColorSelected.value];
        this.colorLabel.string = `Color\n${gm.editColorSelected.value}`;
        this.createBlockButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'block';
        this.createGlassButton.node.getChildByName('indicator').active = gm.editToolsSelected.value == 'glass';
    }

}

